<template>
	<view class="normal-login-container">
		<view class="login-form-content">
			<view style="text-align: left;margin: 20px;">
				<uni-notice-bar :speed="40" color="red" show-icon scrollable :text="msg" />
				<h2>欢迎注册代理</h2>
				<text>注册成功后将自动登陆</text>
			</view>

			<view class="flex align-center">
				<el-cascader :disabled="lock" v-model="registerForm.areaCode" style="width: 100vw;"
					placeholder="请选择您的注册区域" size="large" :props="{ emitPath: false }" :options="regionData">
				</el-cascader>
			</view>

			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="registerForm.nickname" type="text" class="input" placeholder="请输入真实姓名" maxlength="30" />
			</view>

			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="registerForm.username" type="tel" class="input" placeholder="请输入手机号" maxlength="11" />
			</view>

			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="registerForm.password" password class="input" placeholder="请输入密码" maxlength="16" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="registerForm.confirmPassword" password class="input" placeholder="请重复输入密码"
					maxlength="16" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-code icon"></view>
				<input v-model="registerForm.code" inputmode="numeric" class="input" style="width: 60%;"
					placeholder="请输入短信验证码" maxlength="6" />
				<view class="btn" :class="{'btn-disable':seconds!==0}" ref="codeDom" @click="sendCode">
					{{codeText}}
				</view>
			</view>

			<view class="action-btn">
				<button @click="handleRegister()" class="login-btn cu-btn block bg-blue lg">注册代理</button>
			</view>
			<p style="text-align: center;margin-top: 4px;text-decoration: underline;"
				@click="$tab.navigateTo('/pages/login')">已注册去登陆</p>
			<view class="xieyi text-center">
				<text class="text-grey1">登录即同意</text>
				<text @click="manSysBookVisible=true" class="text-blue">《居间从业者行业自审书》</text>
				<text @click="industryBookVisible=true" class="text-blue">《推广方管理制度》</text>
			</view>
		</view>
		<manSysBook :info="registerForm" v-if="manSysBookVisible" @readed="manSysBookVisible=false" />
		<industryBook v-if="industryBookVisible" @readed="industryBookVisible=false" />
	</view>
</template>

<script>
	import {
		regionData
	} from "element-china-area-data";

	import {
		sendVerifyCode,
		register,
		inviteCode
	} from '@/api/login'

	import {
		setToken
	} from '@/utils/auth'

	import {
		msg
	} from '@/api/index.js'

	import manSysBook from '@/components/manSysBook.vue'
	import industryBook from '@/components/industryBook.vue'

	export default {
		components: {
			manSysBook,
			industryBook
		},
		data() {
			return {
				regionData,
				msg: '',
				manSysBookVisible: false,
				industryBookVisible: false,

				seconds: 0,
				codeText: "发送验证码", //验证码文字
				globalConfig: getApp().globalData.config,
				registerForm: {
					nickname: "",
					username: "",
					password: "",
					confirmPassword: "",
					code: "",
					// areaCode: '140403',
					areaCode: undefined,
					parentId: undefined,
					inviteCode: undefined
				},
				lock: false
			}
		},
		onLoad(event) {
			msg('registerMsg').then(res => {
				this.msg = res
			})
			this.registerForm.inviteCode = event.ic ? event.ic : undefined
			this.registerForm.parentId = event.ui ? event.ui : undefined

			if (event.ic) {
				console.log("邀请码")
				inviteCode({
					type: 'REG',
					ic: event.ic
				}).then(res => {
					this.registerForm.areaCode = res.msg
					this.lock = true
				}).catch((e) => {
					this.$modal.msgLoading("邀请码无效")
				})
			}
		},

		methods: {
			sendCode() {
				if (this.seconds > 0) {
					return
				}
				sendVerifyCode(this.registerForm.username).then(res => {
					if (res.code == 200) {
						this.seconds = 59
						let timer = setInterval(() => {
							this.seconds--;
							this.codeText = "重新获取(" + this.seconds + ")"
							if (this.seconds <= 0) {
								this.codeText = "发送验证码"
								clearInterval(timer)
							}
						}, 1000)
					} else {
						this.$modal.msgError(res.msg);
					}
				})
			},

			// 注册方法
			async handleRegister() {
				var un = this.registerForm.username
				var ps = this.registerForm.password
				if (!this.registerForm.areaCode) {
					this.$modal.msgError("请选择注册区域")
				} else if (un == '' || !(/^[1][3-9][0-9]{9}$/.test(un))) {
					this.$modal.msgError("手机号格式异常！")
				} else if (ps == '' || ps.length < 6) {
					this.$modal.msgError("密码长度应大于6位")
				} else if (!(/^[_a-zA-Z0-9]+$/.test(ps))) {
					this.$modal.msgError("仅由英文字母，数字以及下划线组成")
				} else if (ps !== this.registerForm.confirmPassword) {
					this.$modal.msgError("两次输入的密码不一致")
				} else if (this.registerForm.code === "") {
					this.$modal.msgError("请输入验证码")
				} else {
					this.$modal.loading("注册中，请耐心等待...")
					this.register()
				}
			},

			// 用户注册
			async register() {
				this.$modal.closeLoading()
				register(this.registerForm).then(res => {
					console.log('res', res)
					if (res.code == 200) {
						setToken(res.msg)
						this.$store.commit('SET_TOKEN', res.msg)
						this.$store.dispatch('GetInfo').then(res => {
							this.$tab.reLaunch('/pages/home/index')
						})
					} else {
						console.log(res.msg)
					}
				}).catch((e) => {
					console.error(e)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		// background-color: #ffffff;
		// background-color: red;
	}

	.normal-login-container {
		width: 100%;
		// height: auto;
		background-image: url("@/static/images/register-bg.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
		padding-top: 45%;

		.btn {
			border-radius: 10rpx;
			font-size: 20rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #4095E5;
			height: 50rpx;
			width: 180rpx;
		}

		.btn-disable {
			background-color: #999;
		}

		.login-form-content {
			width: 90%;
			margin: auto;
			padding: 10px;
			border-radius: 10px;
			background-color: #fff;

			.input-item {
				margin: 10px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 10px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					background-color: #f5f6f7;
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}
			}

			.login-btn {
				margin-top: 20px;
				height: 45px;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				color: #333;
				margin-top: 10px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}

			.sub-info {
				margin-top: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.sub-info uni-icons {
				margin-top: 10px;
				color: red;
			}

			.sub-info text {
				margin-top: 10px;
				color: #919499;
				font-size: 12px;
			}

			.sub-info p {
				font-size: 13px;
				color: #303030;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.sub-info p span {
				display: block;
				width: 90px;
				height: 2px;
				background-image: linear-gradient(to left, #606060, #f4eacc);
				margin: 0 8px;
			}

			.sub-info p span.s2 {
				background-image: linear-gradient(to left, #f4eacc, #606060);
			}
		}
	}
</style>